<!--vue模板-->
<template>
  <!--询价详情-->

  <div class="detail">
    询价详情
    <el-button type="primary" size="small" @click="add">增行</el-button>
    <el-button type="primary" size="small" @click="del">删行</el-button>
  </div>
  <el-table
    :data="tableData"
    style="width: 100%"
    stripe
    border
    @selection-change="chg"
    @cell-click="cellck"
  >
    <el-table-column
      type="selection"
      width="40"
      header-align="center"
      align="center"
    />
    <el-table-column
      type="index"
      label="序号"
      width="80"
      header-align="center"
      align="center"
    />
    <el-table-column label="供应商名称" width="180" header-align="center" prop="supplier">
      <template v-slot="{ row, column, $index }">
        <el-input
          v-if="row.active && row.active.supplier"
          size="small"
          v-model="row.supplier"
          v-focus
        >
          <template #suffix>
            <el-icon
              class="el-input__icon"
              @click="tosearch(row.index)"
              style="cursor: pointer"
              ><search
            /></el-icon>
          </template>
        </el-input>
        <span v-else>{{ row.supplier }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="数量"
      prop="num"
      width="160"
      header-align="center"
    />

    <el-table-column
      label="单价"
      prop="price"
      width="140"
      header-align="center"
    >
      <template v-slot="{ row, column, $index }">
        <el-input-number
          style="width: 110px"
          size="small"
          :min="0"
          :precision="2"
          v-if="row.active && row.active.price"
          v-model="row.price"
        ></el-input-number>
        <span v-else>{{ row.price.toFixed(2) }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="税率(%)"
      prop="rate"
      width="160"
      header-align="center"
    />

    <el-table-column
      label="票据类型"
      prop="billtype"
      width="160"
      header-align="center"
    />

    <el-table-column
      label="折扣"
      prop="discount"
      :min="0"
      width="140"
      header-align="center"
    >
      <template v-slot="{ row, column, $index }">
        <el-input-number
          :precision="2"
          style="width: 110px"
          size="small"
          v-if="row.active && row.active.discount"
          v-model="row.discount"
        ></el-input-number>
        <span v-else>{{ row.discount.toFixed(2) }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="未税折后单价"
      prop="beforeTaxPrice"
      width="160"
      header-align="center"
    />

    <el-table-column
      label="含税单价"
      prop="taxPrice"
      width="160"
      header-align="center"
    />

    <el-table-column
      label="含税折台单价"
      prop="afterTaxPrice"
      width="160"
      header-align="center"
    />

    <el-table-column
      label="未税金额"
      prop="beforeTaxMoney"
      width="160"
      header-align="center"
    />

    <el-table-column
      label="税额"
      prop="tax"
      width="160"
      header-align="center"
    />

    <el-table-column
      label="总金额"
      prop="total"
      :min="0"
      width="140"
      header-align="center"
    >
      <template v-slot="{ row, column, $index }">
        <el-input-number
          :precision="2"
          style="width: 110px"
          size="small"
          v-if="row.active && row.active.total"
          v-model="row.total"
        ></el-input-number>
        <span v-else>{{ row.total.toFixed(2) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="交货日期" width="140" header-align="center">
      <template v-slot="{ row, column, $index }">
        <el-date-picker
          v-if="row.active && row.active.deliverDate"
          v-model="row.deliverDate"
          style="width: 110px"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          type="date"
          placeholder=""
          size="small"
        />
        <span v-else>{{ row.deliverDate }}</span>
      </template>
    </el-table-column>
    <el-table-column label="备注" prop="note" header-align="center" width="200">
      <template v-slot="{ row, column, $index }">
        <el-input
          v-if="row.active && row.active.note"
          v-model="row.note"
        ></el-input>
        <span v-else>{{ row.note }}</span>
      </template>
    </el-table-column>
  </el-table>

  <!--计算总金额 -->
  <el-row style="height: 50px; line-height: 50px">
    <el-col :span="4" style="text-align: right; padding-right: 10px">
      总金额:
    </el-col>
    <el-col :span="8">
      <el-input disabled v-model="money"></el-input>
    </el-col>
    <el-col :span="4" style="text-align: right; padding-right: 10px">
      数量合计:
    </el-col>
    <el-col :span="8">
      <el-input disabled v-model="totalnum"></el-input>
    </el-col>
  </el-row>

  <!--选择产品-->
  <choose-product
    v-model:visible="isShowChooseProduct"
    @chooseProduct="chgproduct"
  ></choose-product>
</template>

<!--vue 组件选项定义-->
<script>
import ChooseProduct from "@/components/ChooseProduct.vue";
export default {
  data() {
    return {
      totalnum: 0,
      tableData: [],
      selectItems: [], //用来存放用户选择的明细
      linenum: 10, //控制当前最多行
      currentIndex: 0, //当前正在编辑的行
      money: 0, //总金额
      isShowChooseProduct: false, //是否显示选择产品
    };
  },
  components: {
    ChooseProduct,
  },
  directives: {
    // 在模板中启用 v-focus
    focus: {
      mounted(el) {
        let items = el.getElementsByClassName("el-input__inner");
        if (items.length > 0) {
          items[0].focus();
        }
      },
    },
  },
  emits:["updateDetail"],
  watch: {
    tableData: {
      handler: function (val) {
        let tmp=[]; //用来存放具体 的明细
        //遍历数组
        val.forEach((el) => {
          if (el.supplier) {
            tmp.push(el);
          }
        });

        //抛出事件 将数据传给父组件
        this.$emit("updateDetail",tmp);
      },
      deep: true, //深度侦听
    },
  },
  created() {
    this.init();
  },
  methods: {
    tosearch(index) {
      this.isShowChooseProduct = true;
      this.currentIndex = index;
    },

    init() {
      for (let i = 1; i <= this.linenum; i++) {
        let tmp = {
          index: i,
          supplierId: "",
          supplier: "",
          num: 0,
          price: 0,
          rate: 0,
          billtype: "",
          discount: 0,
          beforeTaxPrice: 0,
          taxPrice: 0,
          afterTaxPrice: 0,
          beforeTaxMoney: 0,
          tax: 0,
          total: 0,
          deliverDate: "",
          note: "",
        };
        this.tableData.push(tmp);
      }
    },
    add() {
      this.linenum++;
      this.tableData.push({
        index: this.linenum,
        supplierId: "",
        supplier: "",
        num: 0,
        price: 0,
        rate: 0,
        billtype: "",
        discount: 0,
        beforeTaxPrice: 0,
        taxPrice: 0,
        afterTaxPrice: 0,
        beforeTaxMoney: 0,
        tax: 0,
        total: 0,
        deliverDate: "",
        note: "",
      });
    },

    //单元格点击事件
    cellck(row, column, cell, event) {
      this.hf();
      if (column.property != undefined) {
        row.active = {};
        row.active[column.property] = true;
      }
    },

    //恢复数据
    hf() {
      this.tableData.forEach((el) => {
        el.active = {};
      });
    },
    //选择产品后
    chgproduct(rs) {
      if (rs.length == 0) return;

      //获取选择结果的数量
      let count = rs.length;
      //更新n行
      let n = this.currentIndex + count - 1;

      let index = 0;

      //更新数据 从第currentIndex到n行
      for (let c = this.currentIndex; c <= n; c++) {
        //标志变量
        let flag = false; //默认代表在tableData中没有找到index对应的对象

        //更新一行数据
        for (let i = 0; i < this.tableData.length; i++) {
          let tmp = this.tableData[i];
          if (tmp.index == c) {
            //当前的tmp对象是正在编辑 的行  直接更新
            this.updateRow(tmp, index, rs);
            index++;
            flag = true;
            break;
          }
        }

        //在已有表格数据没有找到
        if (!flag) {
          //增加一行
          this.add();
          //直接更新最后一行
          let tmp = this.tableData[this.tableData.length - 1];
          this.updateRow(tmp, index, rs);
          index++;
        }
      }

      console.log(this.tableData);
    },

    //更新行数据
    updateRow(tmp, index, rs) {
      //当前的tmp对象是正在编辑 的行  直接更新
      tmp.productId = rs[index].id;
      tmp.productName = rs[index].name;
      tmp.productCode = rs[index].code;
      tmp.specification = rs[index].specification;
      tmp.price = rs[index].price;
      tmp.unit = rs[index].unit;
    },

    //当选项发生变化时
    chg(sel) {
      this.selectItems = [];
      //遍历选中的复选框
      sel.forEach((el) => {
        this.selectItems.push(el.index);
      });
    },
    //删除行
    del() {
      if (this.selectItems.length == 0) {
        this.$message.warning("请选择要删除的行！");
        return;
      }

      this.$confirm("你确定要删除吗?", "提示")
        .then((res) => {
          let tmp = []; //用来存放未删除的数据
          //遍历表格数据
          this.tableData.forEach((el) => {
            console.log(el.index);
            //判断当前行是否要删除
            if (this.selectItems.indexOf(el.index) == -1) {
              //没找到 说明当前行不要是要删除的 保存到临时对象里tmp
              tmp.push(el);
            }
          });

          //更新表格行

          this.tableData = tmp;
          console.log("this.tableData>>", this.tableData);
        })
        .catch((err) => {});
    },
  },
};
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.detail {
  height: 40px;
  line-height: 40px;
  border: #c0ccdd solid 1px;
  background-color: #f9fcff;
  margin-top: 20px;
  padding-left: 10px;
  border-bottom-style: none;
}
</style>
